<html>
<head>
    <meta charset="utf-8"/>
    <title>后台主界面</title>
    <#include "../../include/head-file.ftl">
</head>
<body class="custom-body">
<div id="app" v-cloak style="height: 100%;">
    <div class="app-main clearfix">
        <div class="app-main-left">
            <div class="left-header">
                <#--<i class="el-icon-user-solid" style="font-size: 70px;color: #333;"></i>-->
                <div style="background-color: #ccc;width: 90px;height: 90px;line-height:100px;border-radius: 50%;margin: auto;display: flex;align-items: center;justify-content: center;">
                    <img src="${base}/static/svg/u344.svg" width="50" />
                </div>
                <h2 style="font-weight: normal;margin:5px 0;">{{managerInfo.managerName}}</h2>
                <h4 class="left-text" @click="dialogPhoneVisible = true" :title="phone"><span>手机：{{phone?phone:'未绑定'}}</span><i class="el-icon-edit"></i></h4>
                <h4 class="left-text" @click="dialogEmailVisible = true" :title="email"><span>邮箱：{{email?email:'未绑定'}}</span><i class="el-icon-edit"></i></h4>
            </div>
            <el-menu v-model="menuValue" default-active="1" :default-openeds="['5']" @select="select">
                <template v-for="(item, index) in alwaysList">
                    <el-submenu :index="item.index" v-if="item.submenu && item.submenu.length>0">
                        <span slot="title">{{item.title}}</span>
                        <el-menu-item :index="obj.index" v-for="(obj,index) in item.submenu" @click="openMenu(obj.title, obj.isChild)">{{ obj.title }}</el-menu-item>
                    </el-submenu>
                    <el-menu-item :index="item.index" v-else>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="app-main-right">
            <template v-if="menuValue==1">
                <component-panel/>
            </template>
            <template v-if="menuValue==2">
                <component-share/>
            </template>
            <template v-if="menuValue==3">
                <component-favorites/>
            </template>
            <template v-if="menuValue==4">
                <component-reports/>
            </template>
        </div>
    </div>
    <el-dialog :title="phone?'更改手机号绑定':'手机号绑定'" :visible.sync="dialogPhoneVisible">
        <el-form :model="form" :rules="rules" ref="ruleForm1">
            <el-form-item label="当前手机号" label-width="100px" v-if="phone">： {{phone}}</el-form-item>
            <el-form-item :label="phone?'新的手机号':'手机号'" :label-width="formLabelWidth" prop="phone">
                <el-input :placeholder="phone?'请输入新的手机号':'请输入手机号'" v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" :label-width="formLabelWidth" prop="code">
                <el-input placeholder="请输入验证码" v-model="form.code" class="input-with-select">
                    <el-button slot="append" v-show="phoneShow" @click="getCode('SMS', 'ruleForm1')">获取验证码</el-button>
                    <el-button slot="append" v-show="!phoneShow" class="count">{{count1}}s后重新发送</el-button>
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm1')">取 消</el-button>
            <el-button type="primary" @click="submitForm('SMS','ruleForm1')">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog :title="email?'更改邮箱绑定':'邮箱绑定'" :visible.sync="dialogEmailVisible">
        <el-form :model="form" :rules="rules" ref="ruleForm2">
            <el-form-item label="当前邮箱" label-width="100px" v-if="email">： {{email}}</el-form-item>
            <el-form-item :label="email?'新的邮箱':'邮箱'" :label-width="formLabelWidth" prop="email">
                <el-input placeholder="请输入邮箱" v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码" :label-width="formLabelWidth" prop="code">
                <el-input placeholder="请输入验证码" v-model="form.code" class="input-with-select">
                    <el-button slot="append" v-show="emailShow" @click="getCode('EMAIL', 'ruleForm2')">获取验证码</el-button>
                    <el-button slot="append" v-show="!emailShow" class="count">{{count2}}s后重新发送</el-button>
                </el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm2')">取 消</el-button>
            <el-button type="primary" @click="submitForm('EMAIL', 'ruleForm2')">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
</html>
<!--自定义组件-->
<#include "./include/template-home.ftl">
<#include "./include/template-share.ftl">
<#include "./include/template-favorites.ftl">
<#include "./include/template-reports.ftl">
<script>
    var app = new Vue({
        el: '#app',
        components: {
            'componentPanel': MainMyHome,
            'componentShare': MainMyShare,
            'componentFavorites': MainMyFavorites,
            'componentReports': MainMyReports
        },
        data: function() {
            var validatePhone = function (rule, value, callback) {
                var reg=/^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正确手机号'));
                } else {
                    callback();
                }
            };
            var validateEmail = function (rule, value, callback) {
                var reg=/^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if (!reg.test(value)) {
                    callback(new Error('请输入正确格式的邮箱'));
                } else {
                    callback();
                }
            };
            return {
                base: ms.base,
                //常用功能列表
                alwaysList: [
                    { index: '1', title: "我的主页"},
                    { index: '2', title: "我的分享"},
                    { index: '3', title: "我的收藏"},
                    { index: '4', title: "我的报告"},
                    {
                        index: '5',
                        title: "常用操作",
                        submenu: [
                            // { index: '5-1',title: "内容管理", isChild: false},
                            // { index: '5-2',title: "消息中心", isChild: false},
                            // { index: '5-3',title: "权限管理", isChild: false}
                        ]
                    }
                ],
                theme: localStorage.getItem("theme"),
                phone: null,
                email: null,
                menuValue: '1',
                dialogPhoneVisible: false,
                dialogEmailVisible: false,
                form: {
                    phone: null,
                    email: null,
                    code: null
                },
                //登录用户信息
                managerInfo: {
                    managerName: '', //账号
                    managerNickName: ''
                },
                formLabelWidth: '100px',
                phoneShow: true,
                emailShow: true,
                count1: '',
                count2: '',
                timer1: null,
                timer2: null,
                rules: {
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'change' },
                        { validator: validatePhone, trigger: 'change' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'change' },
                        { validator: validateEmail, trigger: 'change' }
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'change' }
                    ]
                }
            }
        },
        methods: {
            select: function (value) {
                if(value<5) {
                    this.menuValue = value;
                }
            },
            managerGet: function () {
                var that = this;
                ms.http.get(ms.manager + "/basic/manager/get.do")
                    .then(function (data) {
                        that.managerInfo = data.data
                    }, function (err) {
                        that.$message.error(err);
                    })
            },
            // 我的联系方式详情
            getMyContact: function () {
                var that = this;
                ms.http.get(ms.manager + "/mycontact/detail.do",{},{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    if (res.result) {
                        var data = res.data ? res.data : {};
                        that.phone = Object.keys(data).length > 0 && data.mobile ? data.mobile : '';
                        that.email = Object.keys(data).length > 0 && data.email ? data.email : '';
                    }
                }).finally(function () {});
            },
            // 发送验证码
            getSendCode: function (type, obj) {
                var that = this;
                ms.http.get(ms.manager + "/mycontact/send/code.do",obj,{
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (res) {
                    if (res.result) {
                        if (type==='SMS') {
                            that.getTimeCount(60, 'timer1', 'count1', 'phoneShow')
                        } else if(type==='EMAIL') {
                            that.getTimeCount(60, 'timer2', 'count2', 'emailShow')
                        }
                    } else  {
                        that.$message.error(res.msg);
                    }
                }).finally(function () {
                    // that.$message.error("操作失败");
                });
            },
            // 获取验证码
            getCode: function (type, formName) {
                var that = this;
                var field = type && type==='SMS'? 'phone':'email';
                that.$refs[formName].validateField(field, function (error) {
                    if (!error) {
                        if(type==='SMS') {
                            var obj1 = {
                                type: type, // 短信SMS，邮件 EMAIL
                                receiver: that.form.phone  // 手机号或者邮箱
                            };
                            that.getSendCode(type, obj1);
                        } else if(type==='EMAIL') {
                            var obj2 = {
                                type: type, // 短信SMS，邮件 EMAIL
                                receiver: that.form.email  // 手机号或者邮箱
                            };
                            that.getSendCode(type, obj2);
                        }
                    } else {
                        console.log('获取验证码失败');
                        return false;
                    }
                });
            },
            getTimeCount: function (timeCount, timer, count, show) {
                var that = this;
                var TIME_COUNT = timeCount;
                if (!that[timer]) {
                    that[count] = TIME_COUNT;
                    that[show] = false;
                    that[timer] = setInterval(function () {
                        if (that[count] > 0 && that[count] <= TIME_COUNT) {
                            that[count]--;
                        } else {
                            that[show] = true;
                            clearInterval(that[timer]);
                            that[timer] = null;
                        }
                    }, 1000)
                }
            },
            // 通过菜单标题，打开页面
            openMenu: function (title, isChild) {
                if(isChild) {
                    // 打开指定标题-只能是子级菜单标题使用
                    window.parent.indexVue.openMenuInTitle(title);
                } else  {
                    // 打开指定标题-只能是父级菜单标题使用
                    window.parent.indexVue.openParentMenuInTitle(title)
                }
            },
            submitForm: function(type, formName) {
                var that = this;
                this.$refs[formName].validate(function(valid) {
                    if (valid) {
                        var api = '';
                        var form = {};
                        if(type==='SMS') {
                            // 手机号绑定
                            api = "/mycontact/bind/mobile.do";
                            form = {code: that.form.code, mobile: that.form.phone}
                        } else if(type==='EMAIL') {
                            // 邮箱绑定
                            api = "/mycontact/bind/email.do";
                            form = {code: that.form.code, email: that.form.email}
                        }
                        ms.http.get(ms.manager + api ,form,{
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(function (res) {
                            if (res.result) {
                                if (type==='SMS') {
                                    that.$message.success('手机号绑定成功！');
                                } else if(type==='EMAIL') {
                                    that.$message.success('邮箱绑定成功！');
                                }
                                that.resetForm();
                                that.getMyContact();
                            } else  {
                                that.$message.error(res.msg);
                            }
                        }).finally(function () {
                            // that.$message.error("操作失败");
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm: function(formName) {
                if(this.dialogPhoneVisible) this.dialogPhoneVisible = false;
                if(this.dialogEmailVisible) this.dialogEmailVisible = false;
                this.$refs[formName].resetFields();
            },
            getAlwaysList: function (v) {
                var markList = localStorage.getItem("markList");
                if (markList) {
                    var lastAlwaysList = this.alwaysList[this.alwaysList.length-1];
                    var pmlist = JSON.parse(markList).map(function (v, i) {
                        return {
                            index: '5-'+(i+1),
                            isChild: false,
                            title: v.title
                        }
                    });
                    lastAlwaysList.submenu = pmlist
                }
            },
            setCallBackFun: function () {
                window.parent.indexVue.addCallBackFun(this.getAlwaysList);
            }
        },
        created: function () {
            this.getAlwaysList();
            this.managerGet();
            this.getMyContact();
        }
    });
</script>
<style>
    .app-main {
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items:stretch;
        width: 100%;
    }

    .app-main-right {
        width: 100%;
        flex-direction: column;
        display: flex;
    }

    .app-main-left {
        flex: 0 0 260px;
        flex-direction: column;
        display: flex;
        margin-right: 10px;
        background-color: #fff;
    }

    .app-main-left .left-header {
        text-align: center;
        padding-top: 20px;
    }

    .app-main-left .left-header .left-text {
        font-weight: normal;
        text-align: left;
        color: #999;
    }

    .app-main-left .left-header .left-text span {
        text-indent: 1.4em;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        max-width: 80%;
    }

    .app-main-left .left-header .left-text i {
        text-indent: 0;
        padding-left: 5px;
    }
    .count {
        color: #00a0e9 !important;
    }

    #app {
        overflow-x: hidden;
    }
    .div-main {
        background-color: #fff;
        padding: 20px;
    }
    .el-form-item--mini.el-form-item {
        margin-bottom: 0;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";    /*不用有内容也可以*/
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }
</style>